<template>
  <p class="media-chat-text media-chat-content" v-html="formatedHtml">&nbsp;</p>
</template>

<script>
import faceMaps from '@/modal/face.json';
export default {
  props: ['contentStr'],
  computed: {
      formatedHtml(){
        if(!this.contentStr) return "&nbsp; ";
        return this.contentStr.replace(/\[(.+?)\]/g, function(matcher, i, originStr){
            let index = faceMaps[matcher]['index'];
            let imgSrc = require(`@/assets/gif/${index}.gif`);
            return '<img src="'+imgSrc+'" class="img-face" />';
        }) + '&nbsp;';
      }
  }
};
</script>